<template>
	<view>
		<view class="header-bar" style="background-color: #FF7F50;"></view>
		<view class="topBox pt48 pl30 pr30">
			<view class="flex row-between col-center">
				<text class="fw-500 color-f fs34">我的</text>
				<u-icon name="setting" color="#fff" size="40" @click="$jump('/pages/my/set_up')"></u-icon>
			</view>
			
			<!-- 个人信息盒子 -->
			<view class="flex col-center mt56">
				<image :src="userInfo.avatar" class="w140 h140 radius140 mr20"></image>
				<view class="flex row-between flex1 col-center h140">
					<view class="flex row-column row-between h-max">
						<view class="fs40 color-f">
							<text class="fw-500">{{userInfo.name}}</text>
						</view>
						<view class="color-f">
								<text class="mr10">会员等级:</text>{{userInfo.level_name}}
						</view>
						<view class="fs26 color-f">推荐码：{{userInfo.regcode}}</view>
					</view>
					<view class="flex col-center row-center color-f" @click="$jump('/pages/my/set_up')">
						<view class="">查看资料</view>
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</view>
			</view>
			<!-- //个人信息盒子 -->
			
			<view class="flex row-around mt50 color-f fs36">
				<!-- 账户余额 -->
				<view class="text-center" @click="$jump(`/pages/my/zhanghu_balance?total=${total}`)">
					<view class="fw-700">{{(total-0).toLocaleString()}}</view>
					<view class="fs24 mt10">账户余额(元)</view>
				</view>
				<view class="text-center" @click="$jump(`/pages/my/zhitui_reward?from=1&total=${(zhitui-0).toLocaleString()}`)">
					<view class="fw-700">{{(zhitui-0).toLocaleString()}}</view>
					<view class="fs24 mt10">直推奖励(元)</view>
				</view>
				<view class="text-center" @click="$jump(`/pages/my/zhitui_reward?from=2&total=${(jiantui-0).toLocaleString()}`)">
					<view class="fw-700">{{(jiantui-0).toLocaleString()}}</view>
					<view class="fs24 mt10">间推奖励(元)</view>
				</view>
			</view>
		</view>
		
		
		<view class="pl30 pr30" style="margin-top: -90rpx;">
			<!-- 我的订单 -->
			<view class=" bg-f radius20 padding30">
				<view class="flex row-between col-center">
					<text class="fw-500 fs30">我的订单</text>
					<view class="color9 fs24 fw-500" @click="$jump('/pages/my/my_order?id=0')">
						<text>全部订单</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view class="flex row-between mt30 mr18 ml18">
					<block v-for="(item,i) in orderList" :key='i'>
						<view class="color6 fs24 text-center" @click="$jump(`/pages/my/my_order?id=${item.id}`)">
							<view class="mb6" style="border: 2rpx dashed #999;">
								<image :src="item.image" class="w80 h80 "></image>
							</view>
							<text>{{item.title}}</text>
						</view>
					</block>
				</view>
			</view>
			<!-- //我的订单 -->
			
			<!-- 我的团队 -->
			<view class="bg-f mt20 padding30 radius20">
				<text class="fw-500 fs30">我的团队</text>
				<view class="mt30 flex flex-wrap mr36 ml36">
					<view class="fs36 mr134 team-item text-center mb30" @click="$jump(`/pages/my/my_team?id=${item.id}`)" v-for="(item,i) in teamList" :key='i'>
						<view class="fw-700">{{item.num}}<text class="fs24 fw-700">人</text></view>
						<view class="fs24 color9 mt10">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- //我的团队 -->
			
			<view class=" bg-f radius20 padding30 mt20">
				<view class="flex row-between col-center">
					<text class="fw-500 fs30">我的服务</text>
				</view>
				<view class="flex mr18 ml18 flex-wrap flex">
					<block v-for="(item,i) in serviceList" :key='i'>
						<view class="color6 fs24 text-center  serviceBox mt30 flex row-column col-center" @click="goto(item)">
								<image :src="item.image" class="w50 h50 mb20"></image>
								<text>{{item.title}}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'my',
		computed:{...mapState('m_user',['userInfo'])},
		onShow() {
			this.getMoney_data()
			//获取团队人数
			this.getTeam()
		},
		data() {
			return {
				jiantui:'',
				total:'',
				zhitui:'',
				teamList:[],
				orderList:[{
					id:1,
					title:'待付款',
					image:'/static/image/my/daishouhuo.png',
					
				},{
					id:2,
					title:'待发货',
					image:'/static/image/my/daifahuo.png'
				},{
					id:3,
					title:'待收货',
					image:'/static/image/my/daishouhuo.png'
				},{
					id:4,
					title:'已完成',
					image:'/static/image/my/down.png'
				}],
				serviceList:[{
					title:'账户管理',
					image:'/static/image/my/service1.png',
					
				},{
					title:'提现',
					image:'/static/image/my/service2.png'
				},{
					title:'我的团队',
					image:'/static/image/my/service3.png'
				},{
					title:'联系客服',
					image:'/static/image/my/service4.png'
				},{
					title:'地址管理',
					image:'/static/image/my/service5.png'
				},{
					title:'关于我们',
					image:'/static/image/my/service6.png'
				}]
			};
		},
		methods:{
			//获取各种余额
			getMoney_data() {
				this.$api.money_data().then(res=>{
					console.log(res)
					// toLocaleString()
					this.jiantui=res.data.jiantui
					this.total=res.data.total
					this.zhitui=res.data.zhitui
				})
			},
			//获取团队人数
			getTeam() {
				this.$api.team().then(res=>{
					console.log(111,res)
					this.teamList=res.data
				})
			},
			//跳转
			goto(item) {
				if(item.title=='账户管理') {
					this.$jump('/pages/my/account_admin')
				}else if(item.title=='地址管理') {
					this.$jump('/pages/my/add_list')
				}else if(item.title=='联系客服') {
					this.$jump('/pages/my/kefu')
				}else if(item.title=='关于我们') {
					this.$jump('/pages/my/about_us')
				}else if(item.title=='提现') {
					this.$jump(`/pages/my/tixian?total=${this.total}`)
				}else if(item.title=='我的团队') {
					this.$jump('/pages/my/my_team?id=1')
				}
			},
		}
	}
</script>

<style lang="scss">
.topBox {
	height: 550rpx;
	background: url(../../static/image/my/myTop.png) no-repeat center;
	background-size: 100% 100%;
}
.serviceBox {
	width: 25%;
}
.serviceBox:nth-child(4n+0) {
	margin-right: 0rpx !important;
}
.team-item:nth-child(3n+0) {
	margin-right: 0rpx !important;
}
</style>
